<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>Monument Valley</title>
  </head>
  <body>
    <style type="text/css">
      .icon {
        overflow: hidden;
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
      }
    </style>
    <main>
      <div class="liveContent">
        <div id="pause">
          <svg class="icon" aria-hidden="true">
            <use href="#icon-pause"></use>
          </svg>
        </div>
        <div id="play">
          <svg class="icon" aria-hidden="true">
            <use href="#icon-play-button"></use>
          </svg>
        </div>
        <pre><code class="css"></code></pre>
      </div>
      <div class="liveImg">
        <div class="wrap">
          <div class="star">
            <div class="star1"></div>
            <div class="star2"></div>
            <div class="star3"></div>
          </div>
          <div class="body">
            <div class="hat"></div>
            <div class="head"></div>
            <div class="neck"></div>
            <div class="face"></div>
            <div class="shirt"></div>
            <div class="skirt"></div>
            <div class="leftleg"></div>
            <div class="rightleg"></div>
          </div>
          <div class="platform"></div>
          <div class="abovewater"></div>
          <div class="underwater"></div>
          <div class="wave"></div>
        </div>
      </div>
    </main>
    <script src="//at.alicdn.com/t/font_339050_d1yhfx9r2v.js"></script>
    <script src="main.js"></script>
  </body>
</html>
